<template>
  <div>
    <div class="page">
      <article class="container">
        <header class="header">
          <section class="hetype">
            <div class="kong"></div>
            <p>分类</p>
            <div class="hbtn">
              <a href="#" class="more iconfont icon-shenglvehao"></a>
              <!-- <span class="xian"></span> -->
              <!-- <a href="#" class="hbtn iconfont icon-xuanzhong" ></a> -->
            </div>
          </section>
          <section>
            <i class="sse iconfont icon-sousuo"></i>
            <input type="text" placeholder="按内容搜索" 

            
            />
          </section>
        </header>
        <article>
          <aside>
            <ul>
              <li
                v-for="(item, index) in oneList"
                :key="item.id"
                :class="index == num ? 'cur' : ''"
                @click="changeOne(index)"
              >
                <a href="#">{{ item.catename }}</a>
              </li>
            </ul>
          </aside>
          <article class="sortcon">
            <ul>
              <li class="clearx">
                <h4>热门精选</h4>
                <a href="#" v-for="item in twoList" :key="item.id" @click="goGoods(item.id)">
                  <img :src="$pre + item.img" alt="" />
                  <p>{{item.catename}}</p>
                </a>
              </li>
              
            </ul>
          </article>
        </article>
      </article>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
        num:0
    };
  },
  methods: {
    ...mapActions({
      asyncOneList: "sort/asyncOneList",
      asyncTwoList: "sort/asyncTwoList",
    }),
    changeOne(index) {
      (this.num = index),
      console.log(index)
      console.log(this.num)
       this.asyncTwoList(index);
    },
     goGoods(id){
      this.$router.push("/productList?id=" + id)
    }
  },
  computed: {
    ...mapGetters({
      oneList: "sort/oneList",
      twoList: "sort/twoList",
    }),
  },
  components: {},
  mounted() {
    this.asyncOneList();
  },
  destroyed() {},
};
</script>
<style scoped>
@import url(../../assets/css/public.css);
@import url(../../assets/css/sort.css);
.container article {
  display: flex;
}
 .cur {
  font-weight: bold;
  color: #ff6040;
}
</style>